import React, { useState, useEffect } from 'react';
import { Button, Col, Row, Typography, Card, Space, Menu, Divider } from 'antd';
import { 
  AntDesignOutlined,
  AppstoreOutlined,
  EditOutlined,
  GlobalOutlined,
  UpOutlined
} from '@ant-design/icons';

const { Title, Paragraph } = Typography;

const LandingPage: React.FC = () => {
  // 导航菜单项
  const menuItems = [
    {
      label: '设计',
      key: 'design',
      children: [
        { label: '设计语言', key: 'language' },
        { label: '设计原则', key: 'principles' },
        { label: '设计模式', key: 'patterns' },
      ]
    },
    {
      label: '文档',
      key: 'docs',
      children: [
        { label: '快速上手', key: 'getting-started' },
        { label: '组件总览', key: 'components' },
        { label: '最佳实践', key: 'best-practices' },
      ]
    },
    {
      label: '资源',
      key: 'resources',
      children: [
        { label: 'Ant Design Pro', key: 'pro' },
        { label: 'Ant Design Mobile', key: 'mobile' },
        { label: '设计资源', key: 'design-assets' },
      ]
    }
  ];

  // 回到顶部按钮显示状态
  const [showBackTop, setShowBackTop] = useState(false);

  // 监听滚动事件
  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 300) {
        setShowBackTop(true);
      } else {
        setShowBackTop(false);
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // 回到顶部功能
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  };

  return (
    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
      {/* Header Navigation - 恢复原始颜色 */}
      <header style={{ 
        position: 'fixed', 
        top: 0, 
        left: 0, 
        right: 0, 
        zIndex: 1000,
        backgroundColor: '#fff', // 改回白色背景
        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)', // 添加轻微阴影
        padding: '0 40px'
      }}>
        <div style={{ 
          maxWidth: '1200px', 
          margin: '0 auto', 
          display: 'flex', 
          alignItems: 'center', 
          justifyContent: 'space-between',
          height: '64px'
        }}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <div style={{ 
              fontSize: '20px', 
              fontWeight: 600, 
              color: '#001529', // 保持深色文字
              display: 'flex',
              alignItems: 'center'
            }}>
              <AntDesignOutlined style={{ fontSize: '24px', marginRight: '8px', color: '#1890ff' }} />
              Ant Design
            </div>
            <nav style={{ marginLeft: '40px' }}>
              <Menu mode="horizontal" items={menuItems} style={{ border: 'none', backgroundColor: 'transparent' }} />
            </nav>
          </div>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <Button type="text" icon={<GlobalOutlined />} style={{ marginRight: '16px' }}>English</Button>
            <Button type="primary" style={{ borderRadius: '4px' }}>GitHub</Button>
          </div>
        </div>
      </header>

      {/* Banner Section */}
      <div 
        style={{ 
          backgroundColor: '#001529', 
          color: 'white', 
          padding: '180px 24px 120px', 
          textAlign: 'center',
          position: 'relative',
          overflow: 'hidden',
          flex: 1,
          display: 'flex',
          alignItems: 'center'
        }}
      >
        {/* Background decorative elements */}
        <div style={{ 
          position: 'absolute', 
          top: '-100px', 
          left: '-100px', 
          width: '300px', 
          height: '300px', 
          borderRadius: '50%', 
          background: 'linear-gradient(90deg, rgba(24, 144, 255, 0.1) 0%, rgba(24, 144, 255, 0.05) 100%)',
          zIndex: 0
        }} />
        <div style={{ 
          position: 'absolute', 
          bottom: '-150px', 
          right: '-50px', 
          width: '400px', 
          height: '400px', 
          borderRadius: '50%', 
          background: 'linear-gradient(90deg, rgba(24, 144, 255, 0.1) 0%, rgba(24, 144, 255, 0.05) 100%)',
          zIndex: 0
        }} />
        
        <div style={{ position: 'relative', zIndex: 1, maxWidth: '1200px', margin: '0 auto', width: '100%' }}>
          <Title 
            level={1} 
            style={{ 
              color: 'white', 
              fontSize: '3.5rem', 
              fontWeight: 800,
              marginBottom: '24px',
              textShadow: '0 0 4px rgba(0, 0, 0, 0.3)'
            }}
          >
            Ant Design 5.0
          </Title>
          <Paragraph 
            style={{ 
              fontSize: '1.3rem', 
              maxWidth: '700px', 
              margin: '0 auto 40px',
              color: 'rgba(255, 255, 255, 0.85)',
              fontWeight: 300
            }}
          >
            助力设计开发者「更灵活」地搭建出「更美」的产品，让用户「快乐工作」～
          </Paragraph>
          <Space size="large">
            <Button type="primary" size="large" style={{ padding: '0 40px', height: '48px', fontSize: '16px' }}>
              开始使用
            </Button>
            <Button size="large" style={{ padding: '0 40px', height: '48px', fontSize: '16px', background: 'rgba(255, 255, 255, 0.1)', color: 'white', borderColor: 'rgba(255, 255, 255, 0.3)' }}>
              设计语言
            </Button>
          </Space>
        </div>
      </div>

      {/* Features Section */}
      <div style={{ padding: '100px 24px', maxWidth: '1200px', margin: '0 auto' }}>
        <Title 
          level={2} 
          style={{ 
            textAlign: 'center', 
            marginBottom: '80px',
            fontWeight: 800,
            fontSize: '2.5rem'
          }}
        >
          丰富的组件与设计语言
        </Title>
        <Row gutter={[48, 48]} justify="center">
          <Col xs={24} sm={12} md={8}>
            <Card 
              bordered={false} 
              style={{ 
                textAlign: 'center', 
                borderRadius: '8px',
                boxShadow: '0 2px 12px rgba(0, 0, 0, 0.05)',
                height: '100%',
                transition: 'all 0.3s',
                cursor: 'pointer'
              }}
              bodyStyle={{ padding: '40px 24px' }}
              hoverable
            >
              <div style={{ 
                width: '80px', 
                height: '80px', 
                borderRadius: '50%', 
                background: '#e6f7ff',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                margin: '0 auto 24px',
                color: '#1890ff',
                fontSize: '32px'
              }}>
                <AppstoreOutlined />
              </div>
              <Title level={4} style={{ marginTop: '20px', fontWeight: 600 }}>组件丰富</Title>
              <Paragraph style={{ fontSize: '16px', color: 'rgba(0, 0, 0, 0.65)' }}>
                大量实用组件满足你的需求，灵活定制与拓展
              </Paragraph>
            </Card>
          </Col>
          <Col xs={24} sm={12} md={8}>
            <Card 
              bordered={false} 
              style={{ 
                textAlign: 'center', 
                borderRadius: '8px',
                boxShadow: '0 2px 12px rgba(0, 0, 0, 0.05)',
                height: '100%',
                transition: 'all 0.3s',
                cursor: 'pointer'
              }}
              bodyStyle={{ padding: '40px 24px' }}
              hoverable
            >
              <div style={{ 
                width: '80px', 
                height: '80px', 
                borderRadius: '50%', 
                background: '#e6f7ff',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                margin: '0 auto 24px',
                color: '#1890ff',
                fontSize: '32px'
              }}>
                <EditOutlined />
              </div>
              <Title level={4} style={{ marginTop: '20px', fontWeight: 600 }}>设计语言</Title>
              <Paragraph style={{ fontSize: '16px', color: 'rgba(0, 0, 0, 0.65)' }}>
                配套生态，让你快速搭建网站应用
              </Paragraph>
            </Card>
          </Col>
          <Col xs={24} sm={12} md={8}>
            <Card 
              bordered={false} 
              style={{ 
                textAlign: 'center', 
                borderRadius: '8px',
                boxShadow: '0 2px 12px rgba(0, 0, 0, 0.05)',
                height: '100%',
                transition: 'all 0.3s',
                cursor: 'pointer'
              }}
              bodyStyle={{ padding: '40px 24px' }}
              hoverable
            >
              <div style={{ 
                width: '80px', 
                height: '80px', 
                borderRadius: '50%', 
                background: '#e6f7ff',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                margin: '0 auto 24px',
                color: '#1890ff',
                fontSize: '32px'
              }}>
                <AntDesignOutlined />
              </div>
              <Title level={4} style={{ marginTop: '20px', fontWeight: 600 }}>灵活定制</Title>
              <Paragraph style={{ fontSize: '16px', color: 'rgba(0, 0, 0, 0.65)' }}>
                支持多种主题定制，满足个性化需求
              </Paragraph>
            </Card>
          </Col>
        </Row>
      </div>

      {/* Component Preview Section */}
      <div style={{ 
        background: 'linear-gradient(135deg, #f5f8ff 0%, #e6f7ff 100%)', 
        padding: '100px 24px',
        position: 'relative',
        overflow: 'hidden'
      }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto', textAlign: 'center' }}>
          <Title 
            level={2} 
            style={{ 
              fontWeight: 800,
              fontSize: '2.5rem',
              marginBottom: '24px'
            }}
          >
            组件预览
          </Title>
          <Paragraph style={{ 
            fontSize: '1.1rem', 
            maxWidth: '700px', 
            margin: '0 auto 60px',
            color: 'rgba(0, 0, 0, 0.65)'
          }}>
            丰富的组件库，帮助你快速构建高质量的用户界面
          </Paragraph>
          
          {/* Component Preview Cards */}
          <div style={{ 
            display: 'flex',
            justifyContent: 'center',
            gap: '24px',
            flexWrap: 'wrap'
          }}>
            <Card style={{ width: '280px', borderRadius: '8px' }} hoverable>
              <div style={{ height: '160px', background: '#f0f2f5', borderRadius: '4px', marginBottom: '16px' }} />
              <Title level={5} style={{ marginBottom: '8px' }}>Button 按钮</Title>
              <Paragraph type="secondary">标记了一个（或封装一组）操作命令</Paragraph>
            </Card>
            
            <Card style={{ width: '280px', borderRadius: '8px' }} hoverable>
              <div style={{ height: '160px', background: '#f0f2f5', borderRadius: '4px', marginBottom: '16px' }} />
              <Title level={5} style={{ marginBottom: '8px' }}>Input 输入框</Title>
              <Paragraph type="secondary">通过鼠标或键盘输入内容</Paragraph>
            </Card>
            
            <Card style={{ width: '280px', borderRadius: '8px' }} hoverable>
              <div style={{ height: '160px', background: '#f0f2f5', borderRadius: '4px', marginBottom: '16px' }} />
              <Title level={5} style={{ marginBottom: '8px' }}>Card 卡片</Title>
              <Paragraph type="secondary">通用卡片容器</Paragraph>
            </Card>
          </div>
        </div>
      </div>

      {/* CTA Section */}
      <div 
        style={{ 
          backgroundColor: '#fff', 
          padding: '100px 24px', 
          textAlign: 'center',
          maxWidth: '1200px', 
          margin: '0 auto'
        }}
      >
        <Title level={2} style={{ fontWeight: 800, marginBottom: '24px' }}>
          准备好开始使用了么？
        </Title>
        <Paragraph style={{ fontSize: '1.1rem', maxWidth: '700px', margin: '0 auto 40px', color: 'rgba(0, 0, 0, 0.65)' }}>
          数千名满意用户已经通过我们的平台改变了他们的工作流程
        </Paragraph>
        <Button type="primary" size="large" style={{ padding: '0 48px', height: '48px', fontSize: '16px' }}>
          立即开始
        </Button>
      </div>

      {/* Footer - 全屏宽度页脚 */}
      <footer 
        style={{ 
          backgroundColor: '#001529', 
          color: 'rgba(255, 255, 255, 0.65)', 
          padding: '40px 0',
          marginTop: 'auto',
          flexShrink: 0,
          width: '100%'
        }}
      >
        {/* 页脚内容全屏宽度显示 */}
        <div style={{ padding: '0 40px' }}>
          <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
            <Row gutter={[48, 48]}>
              <Col xs={24} md={8}>
                <div style={{ 
                  fontSize: '20px', 
                  fontWeight: 600, 
                  color: 'white',
                  display: 'flex',
                  alignItems: 'center',
                  marginBottom: '24px'
                }}>
                  <AntDesignOutlined style={{ fontSize: '24px', marginRight: '8px', color: '#1890ff' }} />
                  Ant Design
                </div>
                <Paragraph style={{ maxWidth: '300px', color: 'rgba(255, 255, 255, 0.65)' }}>
                  企业级 UI 设计语言和 React 组件库，帮助设计师和开发者构建高质量的产品
                </Paragraph>
              </Col>
              <Col xs={24} sm={12} md={4}>
                <Title level={4} style={{ color: 'white', fontWeight: 600, marginBottom: '24px', fontSize: '16px' }}>资源</Title>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                  <a href="#" style={{ color: 'rgba(255, 255, 255, 0.65)', textDecoration: 'none' }}>Ant Design Pro</a>
                  <a href="#" style={{ color: 'rgba(255, 255, 255, 0.65)', textDecoration: 'none' }}>Ant Design Mobile</a>
                  <a href="#" style={{ color: 'rgba(255, 255, 255, 0.65)', textDecoration: 'none' }}>设计资源</a>
                  <a href="#" style={{ color: 'rgba(255, 255, 255, 0.65)', textDecoration: 'none' }}>更新日志</a>
                </div>
              </Col>
              <Col xs={24} sm={12} md={4}>
                <Title level={4} style={{ color: 'white', fontWeight: 600, marginBottom: '24px', fontSize: '16px' }}>社区</Title>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                  <a href="#" style={{ color: 'rgba(255, 255, 255, 0.65)', textDecoration: 'none' }}>GitHub</a>
                  <a href="#" style={{ color: 'rgba(255, 255, 255, 0.65)', textDecoration: 'none' }}>知乎专栏</a>
                  <a href="#" style={{ color: 'rgba(255, 255, 255, 0.65)', textDecoration: 'none' }}>Twitter</a>
                  <a href="#" style={{ color: 'rgba(255, 255, 255, 0.65)', textDecoration: 'none' }}>反馈建议</a>
                </div>
              </Col>
              <Col xs={24} sm={12} md={4}>
                <Title level={4} style={{ color: 'white', fontWeight: 600, marginBottom: '24px', fontSize: '16px' }}>帮助</Title>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                  <a href="#" style={{ color: 'rgba(255, 255, 255, 0.65)', textDecoration: 'none' }}>新手教程</a>
                  <a href="#" style={{ color: 'rgba(255, 255, 255, 0.65)', textDecoration: 'none' }}>常见问题</a>
                  <a href="#" style={{ color: 'rgba(255, 255, 255, 0.65)', textDecoration: 'none' }}>报告 Bug</a>
                  <a href="#" style={{ color: 'rgba(255, 255, 255, 0.65)', textDecoration: 'none' }}>贡献指南</a>
                </div>
              </Col>
              <Col xs={24} sm={12} md={4}>
                <Title level={4} style={{ color: 'white', fontWeight: 600, marginBottom: '24px', fontSize: '16px' }}>更多产品</Title>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                  <a href="#" style={{ color: 'rgba(255, 255, 255, 0.65)', textDecoration: 'none' }}>AntV 可视化</a>
                  <a href="#" style={{ color: 'rgba(255, 255, 255, 0.65)', textDecoration: 'none' }}>ECharts 图表</a>
                  <a href="#" style={{ color: 'rgba(255, 255, 255, 0.65)', textDecoration: 'none' }}>Kitchen 设计工具</a>
                </div>
              </Col>
            </Row>
            
            <Divider style={{ backgroundColor: 'rgba(255, 255, 255, 0.1)', margin: '40px 0' }} />
            
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '24px' }}>
              <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap' }}>
                <a href="#" style={{ color: 'rgba(255, 255, 255, 0.65)', textDecoration: 'none' }}>隐私权政策</a>
                <a href="#" style={{ color: 'rgba(255, 255, 255, 0.65)', textDecoration: 'none' }}>用户协议</a>
                <a href="#" style={{ color: 'rgba(255, 255, 255, 0.65)', textDecoration: 'none' }}>权益保障承诺书</a>
              </div>
              <Paragraph style={{ margin: 0, color: 'rgba(255, 255, 255, 0.65)' }}>
                © {new Date().getFullYear()} Ant Design. All rights reserved.
              </Paragraph>
            </div>
          </div>
        </div>
      </footer>

      {/* 回到顶部按钮 */}
      {showBackTop && (
        <Button
          type="primary"
          shape="circle"
          icon={<UpOutlined />}
          size="large"
          onClick={scrollToTop}
          style={{
            position: 'fixed',
            bottom: '50px',
            right: '50px',
            zIndex: 1000,
            width: '48px',
            height: '48px',
            fontSize: '20px',
            cursor: 'pointer',
            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)'
          }}
        />
      )}
    </div>
  );
};

export default LandingPage;